<template>
  <q-layout>
    <TreeEntity
      :reqData='reqData'
      :tickType='mode'
      v-model:tickObj='ticked'
      @update:ticked='tickedFn'
      v-model:ticked='tickedddd'
    />
    <div>
      {{ticked}}
    </div>
    <q-btn @click='changeMode' color='primary'>{{mode}}模式</q-btn>
  </q-layout>
</template>

<script lang='ts'>
import { defineComponent,ref,onMounted} from 'vue';
import TreeEntity from './TreeEntity.vue'
import { ChanReqData } from './model/Interfaces'
export default defineComponent({
  name: 'TreePage',
  components: { TreeEntity },
  setup () {
    let mode = ref('leaf')
    let reqData = ref<ChanReqData>(undefined)
    let ticked = ref([])
    function tickedFn (tickedId) {
      console.log(tickedId)
    }
    function changeMode () {
      switch (mode.value) {
        case 'leaf' : mode.value = 'strict'; break;
        case 'strict' : mode.value = 'leaf'; break;
      }
    }
    onMounted(()=>{
      setTimeout(() => {
        reqData.value = {
          "entityCode":"301",
          "entityType":"01",
          "length": "999",
          "isRoot":"0",
          "chainHead":"0",
          "entityNo":"71001000202111220000007"
        }
        setTimeout(()=> {
          reqData.value = {
            "entityCode":"301",
            "entityType":"01",
            "length": "999",
            "isRoot":"0",
            "chainHead":"0",
            "entityNo":"30101000202111290000002"
          }
        },5000)
      },3000)


    })
    return {
      tickedFn,
      changeMode,
      reqData,
      ticked,
      mode
    }
  }
});

</script>

<style scoped>

</style>
